<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            color:black;
            background-color: red;
            width: 300px;
            height: 300px;
            /* overflow: hidden;
            overflow: scroll; */
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="div1">
        通常可以将css的优先级由高到低分为6组：
        第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
        第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。
        第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}
        第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
        第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}
        第六优先级：通配选择器，如*{marigin:6px;}
    </div>
</body>
</html>